<template>
  <view class="login-container">
    <view class="form-box">
      <input 
        v-model="form.phone" 
        placeholder="请输入手机号" 
        type="number"
        class="input-item"
      />
      <input 
        v-model="form.password" 
        placeholder="请输入密码" 
        password
        class="input-item"
      />
      <view class="extra-options">
        <text @click="navTo('/pages/login/forgot')">忘记密码？</text>
        <text @click="navTo('/pages/login/register')">立即注册</text>
      </view>
      <button 
        class="login-btn" 
        :disabled="!form.phone || !form.password"
        @click="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      // 实际开发中需要添加表单验证
      uni.showLoading({ title: '登录中...' })
      try {
        // 模拟登录请求
        const userInfo = await this.$api.login(this.form)
        uni.setStorageSync('userInfo', userInfo)
        uni.$emit('login-success')
        uni.reLaunch({ url: '/pages/profile/my' })
      } finally {
        uni.hideLoading()
      }
    },
    navTo(path) {
      uni.navigateTo({ url: path })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 60rpx;
  
  .form-box {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    
    .input-item {
      height: 80rpx;
      border-bottom: 1rpx solid #eee;
      margin-bottom: 30rpx;
      padding: 0 20rpx;
    }
    
    .extra-options {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      color: #5bc0eb;
      font-size: 24rpx;
    }
    
    .login-btn {
      margin-top: 50rpx;
      background: #5bc0eb;
      color: #fff;
      border-radius: 40rpx;
      
      &[disabled] {
        background: #ccc;
      }
    }
  }
}
</style> 